<template>
  <div>
    <div v-show="mode == 1" class="tableFiltersWrap">
      <el-row class="txt-right">
        <el-col>
          <v-form :fields="fields" :fieldsData="tableParams">
            <el-col :span="6" class="txt-left">
              <el-button type="primary" @click="fecthData">查询</el-button>
              <el-button type="default" @click="reloadData">清空</el-button>
              <v-export-btn2 :download="exportList" :columns="columns" fileName="账单" type="default"></v-export-btn2>
            </el-col>
          </v-form>
        </el-col>
      </el-row>
      <div style="display: flex;align-items: center;">
        <div class="tj-k" style="margin-right: 12px;">
          <div style="font-size: 36px;">{{ statData.payTotalAmount }}</div>
          <div style="font-size: 12px;">记账总额</div>
        </div>
        <div class="tj-k">          
          <div style="font-size: 36px;">{{ statData.payCount }}笔</div>
          <div style="font-size: 12px;">记账笔数</div>
        </div>
      </div>      
    </div>
    <v-page v-show="mode == 1">
      <el-card shadow="never" class="card-header-tabs">
        <div class="text item">
          <basic-table ref="basicTable" :columns="columns" :call-server="callServer" @selectionChange="selectionChange" :height="height"
            v-model="tableParamsCopy"></basic-table>
        </div>      
      </el-card>
    </v-page>
    <detail v-if="mode == 2" :info="currentItem" @back="mode = 1"></detail>
  </div>
</template>

<script>
import { list, stat, exportList } from '#/api/billSheet';
import basicTable from "_c/tables";
import moment from 'moment';
import detail from "./detail";

export default {
  components: {
    basicTable,
    detail
  },
  created() {
    window.addEventListener('resize', this.handleResize);
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize);
  },
  data() {
    return {
      tableParams: {
        date: [new Date(moment().format('YYYY-MM') + '-01'), new Date()],
      },
      multipleSelection: [],
      currentItem: {},
      height: window.innerHeight - 320,
      statData: {},
      mode: 1
    };
  },
  computed: {
    tableParamsCopy() {
      const params = {};
      if (this.tableParams.date && this.tableParams.date.length > 1) {
        params.startDate = moment(this.tableParams.date[0]).format('YYYY-MM-DD');
        params.endDate = moment(this.tableParams.date[1]).format('YYYY-MM-DD');
      }
      return params;
    },
    fields() {
      return [
        {
          label: "",
          prop: "date",
          type: "date",
          dType: "daterange",
          span: 6,
          placeholder: "请选择月份",
        },
      ]
    },
    columns() {
      return [
        {
          label: "日期",
          prop: "statDate",
        },
        {
          label: "支付总金额",
          prop: "payTotalAmount",
        },
        {
          label: "支付笔数",
          prop: "payCount",
        },
        {
          label: "支付人数",
          prop: "payNumber",
        },
        {
          label: "小碗菜总额",
          prop: "xwcTotalAmount",
        },
        {
          label: "西北面食总额",
          prop: "xbmsTotalAmount",
        },
        {
          label: "操作",
          fixed: "right",
          width: 250,
          render: (h, row) => {
            return (
              <div>
                <el-button type="text" onClick={() => this.showDetail(row)} size="middle" class="txt-highlight">流水详情</el-button>
                <el-button type="text" onClick={() => this.showDetail(row, 2)} size="middle" class="txt-highlight">加班餐账单</el-button>
                <el-button type="text" onClick={() => this.showDetail(row, 1)} size="middle" class="txt-highlight">个人账单</el-button>
              </div>
            );
          },
        },
      ]
    }
  },
  methods: {
    handleResize() {
      this.height = window.innerHeight - 320;
    },
    callServer() {
      stat({ startDate: this.tableParamsCopy.startDate, endDate: this.tableParamsCopy.endDate, }).then(res => {
        this.statData = res.data;  
      })
      return list;
    },
    fecthData() {
      this.$refs.basicTable.fecthData();
    },
    reloadData() {
      this.tableParams = {}
      this.$refs.basicTable.reload();
    },
    selectionChange(val) {
      this.multipleSelection = val;
    },
    handleNodeClick(node) {
      if (node.children) {
        this.currentNode = node;
        this.fecthData(node.id);
      }
    },
    showDetail(item, codeType) {
      if (codeType) {
        this.currentItem = Object.assign({ codeType }, item || {});
      } else {
        this.currentItem = Object.assign({}, item || {});
      }
      console.log(this.currentItem)
      this.mode = 2;
    },
    exportList(columns, filename) {
      exportList({ ...this.tableParamsCopy, excelDtos: columns }, filename);
    }
  },
};
</script>

<style lang="scss" scoped>
.tj-k {
  box-shadow: 0px 3px 5px rgba(215, 215, 215, 0.349019607843137);
  margin-bottom: 10px;
  padding: 24px 64px;
}
.lcbrwgl-c {
  width: 100% !important;
  height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  .lcbrwgl-header {
    padding: 0px 16px 0 16px;
    background: #fff;
    flex-grow: 0;
    flex-shrink: 0;
    .title {
      display: flex;
      align-items: center;
      font-size: 18px;
    }
  }
  .lcbrwgl-body {
    background: #fff;
    padding: 0 16px 32px 16px;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: auto;
  }
}
</style>